<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <!--组件内部数据传递，对应字面量语法:传递了一个字符串"xxx"-->
        <child message="hello"></child>
        <child message=" world"></child>
        <!--当使用非字符串模版时，名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）,这里对应messageTwo-->
        <child-vue message-html="html"></child-vue>
    </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
    Vue.component('child-vue',{
        props : ['messageHtml'],
        template : '<span>{{messageHtml}}</span>'
    });

    var demo = new Vue({
        el : "#demo",
        components : {
            child : {
                props : ['message'],
                template : '<span>{{message}}</span>'
            }
        }
    });
</script>
</html>